<template>
    <div id="nursingChoose">
        <div id="addAndSearch">
            <div id="add">
                <el-button round type="primary" @click="addDialogVisible = true"
                >配置护理内容</el-button
                >
                <el-dialog
                        title="配置护理内容"
                        :visible.sync="addDialogVisible"
                        width="50%"
                        :before-close="handleClose"
                >
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="护理项目">
                            <el-select v-model="form.name" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in NursingMenu"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                >
                                </el-option>
                            </el-select>
                            </el-form-item>
                            <el-form-item label="执行周期">
                                <el-select v-model="form.fre" placeholder="执行周期">
                                    <el-option label="每天" value="每天"></el-option>
                                    <el-option label="每周" value="每周"></el-option>
                                    <el-option label="每月" value="每月"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="执行次数">
                                <el-input v-model="form.time"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="form.remarks"></el-input>
                            </el-form-item>
                            <el-form-item label="排序号">
                                <el-input v-model="form.number"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false,resetForm()">取 消</el-button>
            <el-button
                    type="primary"
                    @click="
                addDialogVisible = false,
                onSubmit()"
            >立即创建</el-button
            >
          </span>
                </el-dialog>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="NursingConfigList"
                    border
                    highlight-current-row
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="序号" width="50">
                </el-table-column>
                <el-table-column fixed prop="name" label="护理内容" width="200">
                </el-table-column>
                <el-table-column fixed prop="fre" label="执行周期" width="200">
            </el-table-column>
                <el-table-column fixed prop="time" label="执行次数" width="200">
                </el-table-column>
                <el-table-column fixed prop="remarks" label="备注" width="234">
            </el-table-column>
                <el-table-column fixed prop="number" label="排序号" width="200">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >编辑</el-button
                        >
                        <el-button @click="delClick(scope.row)" type="text" size="small"
                        >刪除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="修改护理级别属性"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    :before-close="handleClose"
                    center
            >
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="护理内容">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="执行周期">
                            <el-select v-model="form.fre" placeholder="执行周期">
                                <el-option label="每天" value="每天"></el-option>
                                <el-option label="每周" value="每周"></el-option>
                                <el-option label="每月" value="每月"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="执行次数">
                            <el-input v-model="form.time"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks"></el-input>
                        </el-form-item>
                        <el-form-item label="排序号">
                            <el-input v-model="form.number"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              editClick()
            "
          >确 定</el-button
          >
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import qs from'qs'
    const axios = require("axios");
    export default {
        mounted() {
            this.$data.level_id=this.$route.query.id;
            this.$data.form.id=this.$route.query.id;
            console.log(this.$route.query.id);
            this.getNursingConfig(this.$data.level_id);
            this.getNursingMenu();
        },
        methods: {
            getNursingMenu(){
                axios({
                    method:'post',
                    url:'/api/nursingconfig_page/getNursingMenu',
                    data:qs.stringify(''),
                }).then(
                    (res) => {
                        console.log(res);
                        this.NursingMenu = res.data.data;
                        console.log(this.NursingMenu);
                    },
                    (res) => {}
                );
            },
            onSubmit() {
                console.log(this.form);
                    this.addNursingConfig();
            },
            delClick(row) {
                console.log(row);
                this.delNursingConfig(row.id,row.number);
            },
            editButton(row) {
                this.form.name = row.name;
                this.form.fre = row.fre;
                this.form.time = row.time;
                this.form.remarks = row.remarks;
                this.form.number = row.number;
            },
            resetForm() {
                this.form.id='';
                this.form.name='';
                this.form.number='';
                this.form.time='';
                this.form.remarks='';
                this.form.fre='';
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        this.resetForm();
                        done();
                    })
                    .catch((_) => {});
            },
            getNursingConfig(level) {
                axios({
                    method:'post',
                    url:'/api/nursingconfig_page/getNursingConfig',
                    data:qs.stringify({'id':level}),
                }).then(
                    (res) => {
                        this.NursingConfigList = res.data.data;
                    },
                    (res) => {}
                );
            },
            addNursingConfig() {
                const form = this.$data.form;
                console.log(form);
                axios({
                    method:'post',
                    url:'/api/nursingconfig_page/addNursingConfig',
                    data:qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log("addFinish");
                            this.resetForm();
                            this.getNursingConfig(this.$data.level_id);
                        },
                        (res) => {}
                    );
            },
            delNursingConfig(id,number) {
                axios({
                    method:'post',
                    url:'/api/nursingconfig_page/delNursingConfig',
                    data:qs.stringify({'id':id,'number':number}),
                })
                    .then(
                        (res) => {
                            this.getNursingConfig(this.$data.level_id)
                            console.log(res.data);
                        },
                        (res) => {}
                    );
            },
            editClick() {
                const form=this.$data.form
                axios({
                    method:'post',
                    url:'/api/nursingconfig_page/editNursingConfig',
                    data:qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            this.getNursingConfig(this.$data.level_id);
                            this.resetForm();
                        },
                        (res) => {}
                    );
            },
        },

        data() {
            return {
                level_id:'',
                NursingConfigList: [],
                NursingMenu:[],
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                editId: "",
                form: {
                    id:'',
                    name:'',
                    fre:"",
                    time:"",
                    remarks:"",
                    number:"",
                },
            };
        },
    };
</script>

<style>

    #nursingChoose {
        width: 100%;
        height: 100%;
    }

    #nursingChoose #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #nursingChoose #addAndSearch .el-input {
        width: 200px;
    }
    #nursingChoose #addAndSearch #add {
        float:left;
    }
    #nursingChoose #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #nursingChoose #addAndSearch #search .el-input {
        width: 120px;
    }
    #nursingChoose #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }

    /*#nursingChoose #formDiv .el-table th,#nursingChoose #formDiv .el-table tr,#nursingChoose #formDiv .el-table__empty-block,#nursingChoose .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

